<template>
  <div style="margin-top: 8px;cursor:pointer;">
    <el-button icon="el-icon-back" style="margin-left: 5px;font-size: medium" @click="back">返回</el-button>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="图片名字" prop="title">
        <el-input type="textarea" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="图片上传">
        <el-upload class="upload-demo"
                   action="#"
                   multiple
                   :auto-upload="false"
                   :file-list="fileList"
                   :on-change="onchange"
                   :on-preview="handlePictureCardPreview"
                   list-type="picture-card">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt=""/>
        </el-dialog>
      </el-form-item>
      <el-button @click="onsubmit('form')" size="small" type="primary">上传</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "image_add",
  data(){
    return{
      form:{
        name:''
      },
      //用来绑定加入的图片，后续用大图片预览
      dialogImageUrl:'',
      dialogVisible: false,
      //用来接收缓存中的图片
      fileList: []
    }
  },
  methods:{
    // 绑定@imgAdd event
    $imgAdd(){
      console.log("添加图片")
    },
    $imgDel(){
      console.log("删除图片")
    },
    async back(){
      await this.$router.replace('/image');
    },
    handlePictureCardPreview(file){
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    onchange(file,fileList){
      console.log("上传时的动作");
      console.log(fileList);
      this.fileList = fileList;//每一个改变都会将el-upload里面的图片传递的参数复制到this.filelist去
    },
    onsubmit(formName){//upload
      this.$refs[formName].validate(valid =>{
        if (valid && this.fileList.length>0){
          let formData = new FormData;
          for (let i = 0; i < this.fileList.length; i++){
            //this.fileList[i].raw:获取图片格式
            //这里的file必须和后端Controller中的requestparam参数一致，才能上传成功，否则会报400错误
            formData.append("file",this.fileList[i].raw, this.fileList[i].name);
          }
          formData.append('name',this.form.name);
          //这里重新创建了一个axios实例,是因为在全局配置里的Content-type是appliacation/json,而这里想要使用multipart/form-data
          const http1 = this.$axios.create({
            headers:{
              "Content-Type": "multipart/form-data"
            }
          })
          http1({
            url: this.$httpUrls+"/image/uploadFile",
            method: 'post',
            data: formData
          }).then((res)=>{
            console.log(res.data);
            if (res.data.code==200){
              this.$message({
                message: "上传成功",
                type: "success"
              })
            }else {
              this.$message({
                message: "上传失败",
                type: "warning"
              })
            }
          })
        }else {
          this.$message({
            message: "请按要求完善信息!!!!!!!",
            type: "error"
          })
          return false;
        }
      })
    },
  },
}
</script>

<style scoped>

</style>